<template>
    <view class="user">
		<view class="avatar">
			<image :src="user.avatar" mode="aspectFill"></image>
		</view>
		<view class="message">
			<view class="username">{{ user.username }}</view>
			<view class="email">{{ user.email }}</view>
			<view class="follow"> 手机号：{{ user.number }} </view>
		</view>
		<image class="setting" @click="setting" src="../../static/sl_379.png" mode="widthFix"></image>
    </view>
	<view class="bar">
		<view class="star">
			<image src="../../static/hb_114.png" mode="widthFix"></image>
			<text>收藏</text>
		</view>
		<view class="star">
			<image src="../../static/hb_115.png" mode="widthFix"></image>
			<text>订阅/店铺</text>
		</view>
		<view class="star">
			<image src="../../static/hb_116.png" mode="widthFix"></image>
			<text>足迹</text>
		</view><view class="star">
			<image src="../../static/hb_117.png" mode="widthFix"></image>
			<text>红包/卡卷</text>
		</view>
	</view>
	<view class="myOrder">
		<view class="title">
			我的订单
		</view>
		<view class="content">
			<view>
				<image src="../../static/hb_108.png" mode="widthFix"></image>
				<text>待付款</text>
			</view>
			<view>
				<image src="../../static/hb_109.png" mode="widthFix"></image>
				<text>待发货</text>
			</view>
			<view @click="toWaitingForReceiver">
				<image src="../../static/hb_113.png" mode="widthFix"></image>
				<text>待收货</text>
			</view>
			<view>
				<image src="../../static/hb_111.png" mode="widthFix"></image>
				<text>待评价</text>
			</view>
			<view>
				<image src="../../static/hb_112.png" mode="widthFix"></image>
				<text>售后/退款</text>
			</view>
		</view>
	</view>
	
	<view class="list">
		<view v-for="(item, index) in list" :key="index" class="row">
			<view class="left">{{ item.left }}</view>
			<view v-if="item.right !== ''" class="right">{{ item.right }}</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps(['user'])
const user = props.user

const list = ref([
	{ left: '文件信息', right: '5'},
	{ left: '我的评论', right: ''},
	{ left: '帮助', right: ''},
	{ left: '会员中心', right: '35'},
	{ left: '充值中心', right: ''},
	{ left: '支付货币', right: 'CNY'}
])


const setting = () => {
	uni.navigateTo({
		url:'/pages/setting/setting'
	})
}

const toWaitingForReceiver = () => {
	uni.navigateTo({
		url: '/pages/waitingForReceiver/waitingForReceiver'
	})
}
</script>

<style lang="scss" scoped>
.user {
	margin: 150rpx 46rpx;
	margin-bottom: 40rpx;
	height: 192rpx;
	display: flex;
	align-items: center;
	.avatar {
		image {
			width: 192rpx;
			height: 192rpx;
			border-radius: 192rpx;
		}
	}
	
	.message {
		margin-left: 31rpx;
		.username {
			font-size: 40rpx;
			font-weight: 550;
		}
		.email {
			font-size: 24rpx;
			color: #828282;
		}
		.follow {
			font-size: 16rpx;
			// color: #828282;
		}
	}
	
	.setting {
		width: 31rpx;
		position: absolute;
		left: 648rpx;
		top: 50rpx;
	}
	
}
.bar {
	display: flex;
	justify-content: space-between;
	margin: 0rpx 79rpx;
	view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		image {
			width: 92rpx;
		}
		text {
			font-size: 20rpx;
		}
	}
}

.myOrder {
	margin: 50rpx 50rpx;
	.title {
		font-size: 32rpx;
		font-weight: 600;
	}
	.content {
		margin-top: 20rpx;
		width: 646rpx;
		height: 173rpx;
		border-radius: 30rpx;
		background-color: rgba(255,230,208, 0.37);
		display: flex;
		justify-content: space-around;
		view {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			image {
				width: 92rpx;
			}
			text {
				font-size: 20rpx;
			}
		}
	}
}

.list {
	padding-bottom: 100rpx;
	.row {
		margin: 50rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		font-weight: 550;
		height: 100rpx;
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F3F3F3;
			// width: 73rpx;
			height: 73rpx;
			padding: 0 30rpx;
			border-radius: 50rpx;
		}
	}
}
</style>
